<template>
  <div>
    <el-dialog
      title="添加"
      :append-to-body="true"
      @close="closeDio"
      :visible.sync="show_dia"
      width="800px"
      style="padding: 20px"
    >
      <el-row class="seaheaad">
        <el-col :span="24"> </el-col>
      </el-row>
      <el-table
        ref="multipleTable"
        :data="list.data"
        stripe
        header-row-class-name="head_color"
        tooltip-effect="dark"
        style="width: 99.9%"
      >
        <el-table-column label="员工信息" min-width="120">
          <template slot-scope="scope">
            <div class="user_table">
              <p>
                <span>真实姓名：</span>
                <small>{{ scope.row.name }}</small>
              </p>
              <p>
                <span>联系方式：</span>
                <small>{{ scope.row.tel }}</small>
              </p>
              <p>
                <span>入职时间：</span>
                <small>{{ scope.row.entry_time | getTimeFormat2 }}</small>
              </p>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="其他信息" min-width="160">
          <template slot-scope="scope">
            <div class="user_table">
              <p>
                <span>身份证号码：</span>
                <small>{{ scope.row.card }}</small>
              </p>
              <p>
                <span>家庭住址：</span>
                <small>{{ scope.row.address }}</small>
              </p>
              <p>
                <span>学历：</span>
                <small>{{ scope.row.education }}</small>
              </p>
              <p>
                <span>生日：</span>
                <small>{{ scope.row.birthday | getTimeFormat2 }}</small>
              </p>
              <p>
                <span>入职时间：</span>
                <small>{{ scope.row.entry_time | getTimeFormat2 }}</small>
              </p>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="关联账号" min-width="160">
          <template slot-scope="scope">
            <div class="fx" style="justify-content: flex-start">
              <div class="user_table">
                <p>
                  <span>账号/手机号：</span>
                  <small>{{ scope.row.username || "---" }}</small>
                </p>
                <p>
                  <span>昵称：</span>
                  <small>{{ scope.row.nickname || "---" }}</small>
                </p>
              </div>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="操作" min-width="80">
          <template slot-scope="scope">
            <el-row class="myblank">
              <el-button
                :loading="$store.state.isLoading"
                size="mini"
                @click="addShops(scope.row)"
                type="warning"
              >
                选择
              </el-button>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
      <el-row>
        <el-col :span="24" class="table_bottom">
          <el-col :span="24" class="tr">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage"
              :page-sizes="[5, 10, 15, 20]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="list.all_num"
            >
            </el-pagination>
          </el-col>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      list: [],
      currentPage: 1,
      pageSize: 10,
      loading: false,
      searchAll: {},
      show_dia: this.show,
    };
  },
  mounted() {
    this.getNewsAll();
  },
  methods: {
    addShops(row) {
      this.$emit("sendShop", row);
      this.show_dia = false;
    },
    closeDio() {
      this.$emit("isshow", false);
      this.show_dia = false;
    },
    getSearch(obj) {
      this.searchAll = obj;
      this.getNewsAll(this.searchAll);
    },
    handleSizeChange(val) {
      var params = this.searchAll;
      params.page = "";
      params.page_size = val;
      this.getNewsAll(params);
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      var params = this.searchAll;
      params.page = val;
      params.page_size = this.pageSize;
      this.getNewsAll(params);
    },
    getNewsAll(data) {
      this.loading = true;
      var params = {};
      data = data || {};
      params = data;

      this.$api.getStation.operate_staff_lists(params).then((res) => {
        if (res.data.code == 200) {
          this.list = res.data.result;
        }
        this.loading = false;
      });
    },
    imgError(item) {
      if (!item) {
        return require("@/assets/img/default_head.png");
      }
      if (item.indexOf("http") >= 0) {
        return item;
      } else {
        return "/api/" + item;
      }
    },
  },
  watch: {
    show(val1, val2) {
      if (val1 == val2) {
        return;
      }
      this.show_dia = val1;
      this.currentPage = 1;
    },
    show_dia(val1, val2) {
      if (val1 == val2) {
        return;
      }
      this.$emit("isshow", val1);
    },
  },
};
</script>

<style>
</style>